<template>
  <div id="register">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      class="app"
    >
      <div class="title-container">
        <h3 class="title">
          <img src="../assets/bt.png" alt="" />
        </h3>
      </div>
      <el-form-item prop="email">
        <el-input
          v-model="formData.email"
          placeholder="请输入QQ邮箱"
          clearable
          prefix-icon="el-icon-user-solid"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          placeholder="请输入验证码"
          v-model="formData.code"
          class="input-with-select"
        >
          <el-button
            slot="append"
            @click="getCode"
            :style="{ width: '130px' }"
            >{{ countdown }}</el-button
          >
        </el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input
          placeholder="请输入11位手机号"
          v-model="formData.phone"
          class="input-with-select"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          placeholder="6-12位密码"
          v-model="formData.password"
          class="input-with-select"
          show-password
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password1">
        <el-input
          v-model="formData.password1"
          placeholder="确认密码"
          clearable
          show-password
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button class="xyb" type="primary" @click="submitForm"
          >下一步</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { register, codeid } from "@/axios/user";
export default {
  name: "re",
  components: {},
  props: [],
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入密码"));
      } else if ((value.length < 6) | (value.length > 12)) {
        callback(new Error("密码长度不够"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请确认密码"));
      } else if (value !== this.formData.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入验证码"));
      } else if (value !== this.code) {
        callback(new Error("验证码错误！"));
      } else {
        callback();
      }
    };
    return {
      formData: {
        email: undefined,
        code: undefined,
        phone:undefined,
        password: undefined,
        password1: undefined,
      },
      rules: {
        email: [
          {
            required: true,
            message: "请输入QQ邮箱",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入11位手机号",
            trigger: "blur",
          },
        ],
        code: [{ validator: validateCode, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        password1: [{ validator: validatePass2, trigger: "blur" }],
      },
      countdown: "获取验证码",
      iscode: false,
      code: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 注册
    submitForm() {
      this.$refs["elForm"].validate(async (valid) => {
        if (!valid) return;
        let { data } = await register({
          phone: this.formData.phone,
          password: this.formData.password,
        });
        if (data.code != 200) {
          this.$message.error("注册失败！");
          return;
        }
        this.$router.replace("/login");
      });
    },

    // 获取验证码
    async getCode() {
      if (!this.formData.email) {
        this.$message.error("QQ邮箱不能为空");
        return;
      }
      if (this.iscode) {
        return;
      }
      this.iscode = true;
      let times = 5;
      var time = setInterval(() => {
        if (times == 0) {
          this.countdown = "再次获取验证码";
          this.iscode = false;

          clearInterval(time);
          return;
        }
        this.countdown = "剩余" + (times -= 1) + "秒";
      }, 1000);
      let { data } = await codeid({ email: this.formData.email });
      if (data.code != 200) {
        this.$message.error("验证码获取失败！");
      } else {
        this.$message.success("验证码发送成功");
        this.code = data.id;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#register {
  width: 100%;
  height: 100%;
  min-height:540px ;
  background: url("../assets/register.jpg") repeat;
}
.app {
  width: 520px;
  height: 400px;
  padding: 40px 20px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.title-container,
.title {
  font-size: 26px;
  font-weight: 400;
  color: #eee;
  margin: 0 auto 40px;
  text-align: center;
  font-weight: 700;
}
::v-deep(input) {
  height: 47px !important;
  background-color: rgba(67, 114, 200, 0.73) !important ;
  border: 0 !important;
  color: #eee;
}
.xyb {
  width: 100%;
  height: 50px;
}
</style>

